<!-- Page header -->
<div class="page-header d-print-none">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col">
                <h2 class="page-title">
                    用户中心
                </h2>
            </div>
        </div>
    </div>
</div>
<!-- Page body -->
<div class="page-body">
    <div class="container-xl">
        <div class="card">
            <div class="row g-0">
                <div class="col-3 d-none d-md-block border-end">
                    <div class="card-body">
                        <div class="list-group list-group-transparent">
                            <a href="javascript:void(0);"
                               class="list-group-item list-group-item-action d-flex align-items-center active">我的账户</a>
                            <!-- <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">修改密码</a>
                                    <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">个人简介</a> -->
                        </div>
                    </div>
                </div>
                <div class="col d-flex flex-column">
                    <div class="card-body">
                        <h2 id="settings_nickname" class="mb-4"></h2>
                        <input type="text" style="display: none;" id="settings_user_id">
                        <div class="row align-items-center">
                            <div class="col-auto">
                                <a id="settings_avatar" class="avatar avatar-xl"
                                   style="background-image: url(./image/avatar02.jpeg)"
                                   onclick="openFileDialog()"></a>
                                <!-- 文件选择 -->
                                <input type="file" name="file" class="form-control" style="display: none;"
                                       id="settings_input_chooiceAvatar">
                            </div>

                            <div class="col-auto"><a href="javascript:void(0);" class="btn" onclick="openFileDialog()">
                                修改头像
                            </a>

                            </div>
                        </div>
                        <h3 class="card-title mt-4">昵称</h3>
                        <div class="row">
                            <div class="col-9">
                                <input id="setting_input_nickname" type="text" class="form-control">
                                <div class="invalid-feedback">昵称不能为空</div>
                            </div>
                            <div class="col-3">
                                <a id="setting_submit_nickname" href="javascript:void(0)" class="btn">
                                    修 改
                                </a>
                            </div>
                        </div>
                        <hr>
                        <h3 class="card-title mt-4">邮箱地址</h3>
                        <div>
                            <div class="row g-3">
                                <div class="col-9">
                                    <input id="setting_input_email" type="text" class="form-control">
                                    <div class="invalid-feedback">邮箱地址不能为空</div>
                                </div>
                                <div class="col-3">
                                    <a id="setting_submit_email" href="javascript:void(0)" class="btn">
                                        修 改
                                    </a>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <h3 class="card-title mt-4">电话号码</h3>
                        <div>
                            <div class="row g-3">
                                <div class="col-9">
                                    <input id="setting_input_phoneNum" type="text" class="form-control">
                                    <div class="invalid-feedback">电话号码不能为空</div>
                                </div>
                                <div class="col-3">
                                    <a id="setting_submit_phoneNum" href="javascript:void(0);" class="btn">
                                        修 改
                                    </a>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <h3 class="card-title mt-4">修改密码</h3>
                        <div>
                            <div class="row g-3">
                                <!-- 表单 -->
                                <div class="col-9">
                                    <form autocomplete="off" novalidate>
                                        <div class="mb-2">
                                            <label class="form-label required">
                                                原密码
                                            </label>
                                            <div class="input-group input-group-flat">
                                                <input id="settings_input_oldPassword" type="password"
                                                       class="form-control" placeholder="请输入密码" autocomplete="off">
                                                <span class="input-group-text">
                          <a href="#" class="link-secondary" title="显示密码"
                             data-bs-toggle="tooltip"><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                 viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                 stroke-linecap="round" stroke-linejoin="round">
                              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                              <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/>
                              <path
                                      d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"/>
                            </svg>
                          </a>
                        </span>
                                                <div class="invalid-feedback">原密码不能为空</div>
                                            </div>
                                        </div>

                                        <div class="mb-2">
                                            <label class="form-label required">
                                                新原密码
                                            </label>
                                            <div class="input-group input-group-flat">
                                                <input id="settings_input_newPassword" type="password"
                                                       class="form-control" placeholder="请输入密码" autocomplete="off">
                                                <span class="input-group-text">
                          <a href="#" class="link-secondary" title="显示密码"
                             data-bs-toggle="tooltip"><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                 viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                 stroke-linecap="round" stroke-linejoin="round">
                              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                              <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/>
                              <path
                                      d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"/>
                            </svg>
                          </a>
                        </span>
                                                <div class="invalid-feedback">新密码不能为空</div>
                                            </div>
                                        </div>
                                        <div class="mb-2">
                                            <label class="form-label required">
                                                确认密码
                                            </label>
                                            <div class="input-group input-group-flat">
                                                <input id="settings_input_passwordRepeat" type="password"
                                                       class="form-control" placeholder="请输入密码" autocomplete="off">
                                                <span class="input-group-text">
                          <a href="#" class="link-secondary" title="显示密码"
                             data-bs-toggle="tooltip"><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                 viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                 stroke-linecap="round" stroke-linejoin="round">
                              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                              <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/>
                              <path
                                      d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"/>
                            </svg>
                          </a>
                        </span>
                                                <div class="invalid-feedback">确认密码不能为空</div>
                                            </div>
                                        </div>

                                        <div class="form-footer">
                                            <button id="settings_submit_password" type="button"
                                                    class="btn btn-outline-danger w-100">提交修改
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <h3 class="card-title mt-4">个人简介</h3>
                        <div class="row">
                            <div class="col-9">
                <textarea id="settings_textarea_remark" class="form-control"
                          placeholder="写点自我介绍，可以让朋友们了解你..."
                          rows="5"></textarea>
                                <div class="invalid-feedback">个人简介不能为空</div>
                            </div>
                            <div class="col-3">
                                <a href="javascript:void(0);" class="btn" id="settings_submit_remark">
                                    修 改
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<script>
    // $(function () {
    //     // ================= 获取用户详情，初始化页面内容 =================
    //     // 发送AJAX请求，成功时 调用initUserInfo方法，完成页面数据初始化
    //     $.ajax({
    //         type: 'get',
    //         url: '/user/info',
    //         success: function (respData) {
    //             if (respData.code === 0 && respData.message === '成功') {
    //                 initUserInfo(respData.data);
    //                 avatarUrl = respData.data.avatarUrl;
    //                 $('#index_nav_avatar').css('background-image', 'url(' + avatarUrl + ')');
    //             } else {
    //                 $.toast({
    //                     heading: '警告',
    //                     text: respData.message,
    //                     icon: 'warning'
    //                 })
    //             }
    //         },
    //         error: function () {
    //             $.toast({
    //                 heading: '错误',
    //                 text: '访问出现问题,请与管理员联系',
    //                 icon: 'error'
    //             })
    //         }
    //     });
    // });

    function getUserInfo() {
        console.log("调用getUserInfo接口")
        $.ajax({
            type: 'get',
            url: '/user/info',
            success: function (respData) {
                if (respData.code === 0 && respData.message === '成功') {

                    initUserInfo(respData.data);
                    console.log(initUserInfo)
                    avatarUrl = respData.data.avatarUrl;
                    $('#index_nav_avatar').css('background-image', 'url(' + avatarUrl + ')');
                } else {
                    $.toast({
                        heading: '警告',
                        text: respData.message,
                        icon: 'warning'
                    })
                }
            },
            error: function () {
                $.toast({
                    heading: '错误',
                    text: '访问出现问题,请与管理员联系',
                    icon: 'error'
                })
            }
        });
    }

    getUserInfo();

    // ================= 设置用户信息 =================
    function initUserInfo(user) {
        // 默认头像路径
        console.log(user)
        user.avatarUrl = avatarUrl;
        // 用户Id
        $('#settings_user_id').val(user.id);
        // title 昵称
        $('#settings_nickname').html(user.nickname);
        // 头像
        $('#settings_avatar').css('background-image', 'url(' + user.avatarUrl + ')');
        // 昵称
        $('#setting_input_nickname').val(user.nickname);
        // 邮箱
        $('#setting_input_email').val(user.email);
        // 电话
        $('#setting_input_phoneNum').val(user.phoneNum);
        // 个人简历
        $('#settings_textarea_remark').html(user.remark);
    }

    // ================= 封装ajax请求 =================
    function changeUserInfo(userInfo, type) {
        // 校验用户信息
        if (!userInfo) {
            $.toast({
                heading: '提示',
                text: '请检查要修改的内容是否正确或联系管理员',
                icon: 'info'
            });
            return;
        }

        // 构造query string
        let searchParams = new URLSearchParams(userInfo);
        let queryString = '?' + searchParams.toString();
        console.log(queryString);

        // 定义接口路径
        let userURL = 'user/modifyInfo';
        if (type == 1) {
            userURL = 'user/modifyInfo';
        } else if (type == 2) {
            userURL = 'user/modifyPwd';
        }

        // 发送请求，提示响应结果
        $.ajax({
            type: 'post',
            url: userURL,
            data: userInfo,
            success: function (respData) {
                console.log(userInfo)
                if (respData.code === 0 && respData.message === '成功') {
                    $.toast({
                        heading: '成功',
                        text: '修改成功',
                        icon: 'success'
                    })
                    let user = respData.data;
                    if (user && user.nickname) {
                        $('#settings_nickname').html(user.nickname);
                        $('#index_nav_nickname').html(user.nickname);
                    }
                    if (type === 2) {
                        location.assign('./login.html');
                    }
                } else {
                    $.toast({
                        heading: '警告',
                        text: respData.message,
                        icon: 'warning'
                    })
                }
            },
            error: function () {
                $.toast({
                    heading: '错误',
                    text: '访问出现问题,请与管理员联系',
                    icon: 'error'
                })
            }
        });

    }

    // ================= 处理选择头像事件 =================
    function openFileDialog() {
        // 触发选择文件按钮的点击事件
        $('#settings_input_chooiceAvatar').click();
    }

    // 监听文件选择器的「文件选择变化」事件（用户选图后自动执行上传）
    $('#settings_input_chooiceAvatar').on('change', function (e) {
        // 1. 获取用户选择的单个文件（头像仅需单图）
        const file = e.target.files[0];
        // 2. 基础校验：未选文件或非图片类型，直接提示并返回
        if (!file) {
            $.toast({
                heading: '提示',
                text: '请先选择要上传的头像图片',
                icon: 'info'
            });
            return;
        }
        if (!file.type.startsWith('image/')) {
            $.toast({
                heading: '提示',
                text: '仅支持JPG、PNG等图片格式，请重新选择',
                icon: 'info'
            });
            // 清空选择器（避免重复选同一非图片文件不触发change事件）
            $(this).val('');
            return;
        }

        // 3. 构造FormData（仅传递file参数，贴合后端接口要求）
        const formData = new FormData();
        formData.append('file', file); // 仅追加file参数，与后端@RequestParam("file")对应

        // 4. 发送AJAX文件上传请求
        $.ajax({
            type: 'post',
            url: '/file/upload', // 后端文件上传接口
            data: formData,
            // 关键配置：文件上传必须禁用jQuery自动处理数据（否则破坏二进制格式）
            contentType: false,
            processData: false,
            // 可选：上传进度监听（提升用户体验，可根据需求保留或删除）
            xhr: function () {
                const xhr = new XMLHttpRequest();
                xhr.upload.addEventListener('progress', function (e) {
                    if (e.lengthComputable) {
                        const progress = Math.round((e.loaded / e.total) * 100);
                        console.log(`头像上传中：${progress}%`);
                        // 若需显示进度条，可在此处添加DOM操作（如弹窗进度提示）
                    }
                });
                return xhr;
            },
            // 5. 处理接口响应
            success: function (respData) {
                // 清空文件选择器（避免重复上传同一文件）
                $('#settings_input_chooiceAvatar').val('');

                // 响应成功：更新头像预览 + 同步用户信息
                if (respData.code === 0) {
                    const avatarUrl = respData.message; // 后端返回的头像完整URL（在message字段）
                    // 第一步：更新页面头像显示（背景图替换）
                    $('#settings_avatar').css('background-image', `url(${avatarUrl})`);

                    // 第二步：同步新头像URL到用户信息表（需调用已有changeUserInfo方法）
                    // 注：此处需传递userId（后端更新用户信息时需定位用户），从页面隐藏字段获取
                    const userInfo = {
                        id: $('#settings_user_id').val(), // 用户ID（仅用于更新用户信息，非上传文件参数）
                        avatarUrl: avatarUrl // 新头像URL
                    };
                    $('#index_nav_avatar').css('background-image', 'url(' + avatarUrl + ')');
                    // changeUserInfo(userInfo, 1); // type=1对应「修改用户基本信息」接口
                    // 提示上传成功
                    $.toast({
                        heading: '成功',
                        text: '头像上传并更新成功',
                        icon: 'success'
                    });
                    window.location.reload();
                }
                // 响应失败（如文件过大、后端处理异常）
                else {
                    $.toast({
                        heading: '上传失败',
                        text: respData.message || '未知错误，请重试',
                        icon: 'warning'
                    });
                }
            },
            // 6. 网络错误处理（如接口不可达、超时）
            error: function () {
                $('#settings_input_chooiceAvatar').val('');
                $.toast({
                    heading: '错误',
                    text: '网络异常，头像上传失败，请检查网络或联系管理员',
                    icon: 'error'
                });
            }
        });
    });

    // ================= 修改用户昵称 =================
    $('#setting_submit_nickname').click(function () {
        // 获取值
        let nicknameEl = $('#setting_input_nickname');
        // 校验
        if (!nicknameEl.val()) {
            nicknameEl.focus();
            return false;
        }
        // 构造数据
        let nicknameObj = {
            id: $('#settings_user_id').val(),
            nickname: nicknameEl.val()
        }
        // 发送请求
        changeUserInfo(nicknameObj);
    });

    // ================= 修改邮箱 =================
    $('#setting_submit_email').click(function () {
        // 获取值
        let emailEl = $('#setting_input_email');
        // 校验
        if (!emailEl.val()) {
            emailEl.focus();
            return false;
        }
        // 构造数据
        let emailObj = {
            id: $('#settings_user_id').val(),
            email: emailEl.val()
        }
        // 发送请求
        changeUserInfo(emailObj);
    });

    // ================= 修改电话 =================
    $('#setting_submit_phoneNum').click(function () {
        // 获取值
        let phoneNumEl = $('#setting_input_phoneNum');
        // 校验
        if (!phoneNumEl.val()) {
            phoneNumEl.focus();
            return false;
        }
        // 构造数据
        let phoneNumObj = {
            id: $('#settings_user_id').val(),
            phoneNum: phoneNumEl.val()
        }
        // 发送请求
        changeUserInfo(phoneNumObj);
    });


    // ================= 修改个人介绍 =================
    $('#settings_submit_remark').click(function () {
        // 获取值
        let remarkEl = $('#settings_textarea_remark');
        // 校验
        if (!remarkEl.val()) {
            remarkEl.focus();
            return false;
        }
        // 构造数据
        let remarkObj = {
            id: $('#settings_user_id').val(),
            remark: remarkEl.val()
        }
        // 发送请求
        changeUserInfo(remarkObj);
    });

    // ================= 修改密码 =================
    $('#settings_submit_password').click(function () {
        // 获取值
        let oldPasswordEl = $('#settings_input_oldPassword');
        // 校验
        if (!oldPasswordEl.val()) {
            oldPasswordEl.focus();
            return false;
        }
        // 获取值
        let newPasswordEl = $('#settings_input_newPassword');
        // 校验
        if (!newPasswordEl.val()) {
            newPasswordEl.focus();
            return false;
        }
        // 获取值
        let passwordRepeatEl = $('#settings_input_passwordRepeat');
        // 校验
        if (!passwordRepeatEl.val()) {
            passwordRepeatEl.focus();
            return false;
        }

        // 两次输入的密码是否相同
        if (newPasswordEl.val() != passwordRepeatEl.val()) {
            $.toast({
                heading: '提示',
                text: '两次输入的密码不相同',
                icon: 'warning'
            });
            // 获取焦点
            passwordRepeatEl.focus();
            return false;
        }

        // 构造数据
        let passwrodObj = {
            id: $('#settings_user_id').val(),
            oldPassword: oldPasswordEl.val(),
            newPassword: newPasswordEl.val(),
            passwordRepeat: passwordRepeatEl.val()

        }
        // 发送请求
        changeUserInfo(passwrodObj, 2);
        // 清空输入框
        oldPasswordEl.val('');
        newPasswordEl.val('');
        passwordRepeatEl.val('');
    });

</script>